<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:head="http://www.w3.org/1999/html">
<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}"  media="all"/>
<link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap-table/bootstrap-table.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/table.css}"  media="all"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/scrollbar.css}"  media="all"/>
<link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/select2/css/select2.css}" media="all"/>
<link href="zxsdwms/plugin/font-awesome/css/font-awesome.css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" th:href="@{/plugin/ztree/metroStyle/metroStyle.css}" media="all"/>
<!--<head th:include="public/page_css::page_css ('货主管理')"/>-->
<style>

    .wizard {
        -webkit-border-radius: 2px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 2px;
        -moz-background-clip: padding;
        border-radius: 2px;
        background-clip: padding-box;
        -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
        box-shadow: 0 0 4px rgba(0, 0, 0, .3);
        background-color: #fff;
        position: relative;
        overflow: hidden
    }

    .wizard.wizard-tabbed {
        background: #fbfbfb
    }

    .wizard.wizard-tabbed ul li {
        padding: 0 30px;
        background-color: #fbfbfb
    }

    .wizard.wizard-tabbed ul li .chevron {
        display: none
    }

    .wizard.wizard-tabbed ul li .chevron:before {
        display: none
    }

    .wizard.wizard-tabbed ul li.complete {
        background-color: #fbfbfb
    }

    .wizard.wizard-tabbed ul li.active {
        background: #fff
    }

    .wizard.wizard-wired {
        padding-top: 10px;
        display: block;
        background: #fff;
        text-align: center;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-bottom: 1px solid #eee
    }

    .wizard.wizard-wired ul {
        display: table;
        width: 100%;
        position: relative
    }

    .wizard.wizard-wired ul li {
        display: table-cell;
        text-align: center;
        background-color: #fff;
        width: 20%;
        padding: 0;
        margin: 0;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease
    }

    .wizard.wizard-wired ul li .chevron {
        display: none
    }

    .wizard.wizard-wired ul li .chevron:before {
        display: none
    }

    .wizard.wizard-wired ul li.complete {
        background-color: #fff
    }

    .wizard.wizard-wired ul li.complete .step:before {
        font-size: 22px;
        line-height: 36px
    }

    .wizard.wizard-wired ul li.complete:hover {
        background-color: #fff
    }

    .wizard.wizard-wired ul li.active {
        background-color: #fff
    }

    .wizard.wizard-wired ul li .step {
        border-width: 2px;
        width: 40px;
        height: 40px;
        line-height: 34px;
        font-size: 15px;
        z-index: 2;
        background-color: #fff
    }

    .wizard.wizard-wired ul li .title {
        display: block;
        margin-top: 4px;
        margin-bottom: 6px;
        max-width: 100%;
        font-size: 14px;
        line-height: 20px;
        z-index: 104;
        text-align: center;
        table-layout: fixed;
        -ms-word-wrap: break-word;
        word-wrap: break-word
    }

    .wizard.wizard-wired ul li:before {
        display: block;
        content: "";
        width: 100%;
        height: 2px !important;
        font-size: 0;
        overflow: hidden;
        background-color: #e5e5e5;
        position: relative !important;
        top: 25px;
        z-index: 1 !important
    }

    .wizard.wizard-wired ul li:first-child:before {
        max-width: 51%;
        left: 50%
    }

    .wizard.wizard-wired ul li:last-child:before {
        max-width: 50%;
        width: 50%
    }

    .wizard ul {
        list-style: none outside none;
        padding: 0;
        margin: 0;
        width: 4000px
    }

    .wizard ul.previous-disabled li.complete {
        cursor: default
    }

    .wizard ul.previous-disabled li.complete:hover {
        background: #f3f3f3;
        cursor: default
    }

    .wizard ul.previous-disabled li.complete:hover .chevron:before {
        border-left-color: #f3f3f3
    }

    .wizard ul li {
        float: left;
        margin: 0;
        padding: 0 20px 0 30px;
        line-height: 46px;
        position: relative;
        background: #f5f5f5;
        color: #d0d0d0;
        font-size: 16px;
        cursor: default;
        -webkit-transition: all .218s ease;
        -moz-transition: all .218s ease;
        -o-transition: all .218s ease;
        transition: all .218s ease
    }

    .wizard ul li .step {
        border: 2px solid #e5e5e5;
        color: #ccc;
        font-size: 13px;
        border-radius: 100%;
        position: relative;
        z-index: 2;
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 20px;
        text-align: center;
        margin-right: 10px
    }

    .wizard ul li .chevron {
        border: 24px solid transparent;
        border-left: 14px solid #d4d4d4;
        border-right: 0;
        display: block;
        position: absolute;
        right: -14px;
        top: 0;
        z-index: 1
    }

    .wizard ul li .chevron:before {
        border: 24px solid transparent;
        border-left: 14px solid #f5f5f5;
        border-right: 0;
        content: "";
        display: block;
        position: absolute;
        right: 1px;
        top: -24px;
        -webkit-transition: all .218s ease;
        -moz-transition: all .218s ease;
        -o-transition: all .218s ease;
        transition: all .218s ease
    }

    .wizard ul li.complete {
        background: #f5f5f5;
        color: #444
    }

    .wizard ul li.complete:before {
        display: block;
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: -1px;
        height: 2px;
        max-height: 2px;
        overflow: hidden;
        background-color: #a0d468;
        z-index: 10000
    }

    .wizard ul li.complete:hover {
        background: #eee;
        cursor: pointer
    }

    .wizard ul li.complete:hover .chevron:before {
        border-left: 14px solid #eee
    }

    .wizard ul li.complete .chevron:before {
        border-left: 14px solid #f5f5f5
    }

    .wizard ul li.complete .step {
        color: #a0d468;
        border-color: #a0d468
    }

    .wizard ul li.complete .step:before {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        line-height: 20px;
        text-align: center;
        border-radius: 100%;
        content: "";
        background-color: #fff;
        z-index: 3;
        font-family: FontAwesome;
        font-size: 12px;
        color: #a0d468
    }

    .wizard ul li.active {
        background: #fff;
        color: #262626
    }

    .wizard ul li.active .step {
        border-color: #2dc3e8;
        color: #2dc3e8
    }

    .wizard ul li.active:before {
        display: block;
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: -1px;
        height: 2px;
        max-height: 2px;
        overflow: hidden;
        background-color: #2dc3e8;
        z-index: 10000
    }

    .wizard ul li.active .chevron:before {
        border-left: 14px solid #fff
    }

    .wizard ul li .badge {
        margin-right: 8px
    }

    .wizard ul li:first-child {
        -webkit-border-radius: 2px 0 0 0;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 2px 0 0 0;
        -moz-background-clip: padding;
        border-radius: 2px 0 0 0;
        background-clip: padding-box;
        padding-left: 20px
    }

    .step-content {
        border-top: 0;
        -webkit-border-radius: 0 0 2px 2px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 0 0 2px 2px;
        -moz-background-clip: padding;
        border-radius: 0 0 2px 2px;
        background-clip: padding-box;
        padding: 10px;
        margin-bottom: 10px;
        -webkit-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
        -moz-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
        box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
        background-color: #fbfbfb
    }

    .step-content .step-pane {
        display: none
    }

    .step-content .active {
        display: inline;
    }

    .step-content .active .btn-group .active {
        display: inline-block
    }
    .wizard{
        position: fixed;
        z-index:9999;
    }
    .actions .btn-group, .btn-group-vertical{
        left: 1.5%;
    }
</style>
<body >
<div id="simplewizardinwidget" class="wizard" data-target="#simplewizardinwidget-steps">
    <ul class="steps">
        <li data-target="#simplewizardinwidgetstep1" class="active"><span class="step">1</span>基础信息<span class="chevron"></span></li>
        <li data-target="#simplewizardinwidgetstep2" class="active"><span class="step">2</span>指定库位<span class="chevron"></span></li>
        <li data-target="#simplewizardinwidgetstep3" class="active"><span class="step">3</span>规则设置<span class="chevron"></span></li>
        <li data-target="#simplewizardinwidgetstep4" class="active"><span class="step">4</span>订单设置<span class="chevron"></span></li>
        <li data-target="#simplewizardinwidgetstep5" class="active"><span class="step">5</span>更多设置<span class="chevron"></span></li>
    </ul>
    <div class="actions" id="simplewizardinwidget-actions">
        <div class="btn-group">
            <button type="button" onclick="returnpage()" class="layui-btn layui-btn-normal" value="关闭"  style="font-size: 15px;">关闭</button>
            <button type="button" class="layui-btn layui-btn-normal btn-prev"> <i class="fa fa-angle-left"></i>上一步</button>
            <button type="button" class="layui-btn layui-btn-normal btn-next" data-last="提交" lay-submit="" lay-filter="addUser">下一步<i class="fa fa-angle-right"></i></button>
        </div>
    </div>
</div>
<form action="" class="layui-form layui-form-pane" id="addForm" style="position: relative;top: 47px;">
    <div class="step-content" id="simplewizardinwidget-steps">
        <div class="step-pane active" id="simplewizardinwidgetstep1">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" data-title>货主名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="mc" id="mc" placeholder="请输入货主名称" data-required autocomplete="off" class="layui-input "/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">优先级</label>
                    <div class="layui-input-inline" >
                        <select name="yxj">
                            <option value="0" selected="">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">联系人</label>
                    <div class="layui-input-inline">
                        <input type="text" name="lxr" id="lxr" placeholder="请输入联系人" data-required  autocomplete="off" class="layui-input "/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dz" id="dz" placeholder="请输入地址" data-required autocomplete="off" class="layui-input "/>
                    </div>
                </div>

            </div>

        </div>
        <div class="step-pane" id="simplewizardinwidgetstep2">
            <!--库位树结构-->
            <input type="hidden" id="librarypositionIds" name="librarypositionIds">
            <ul id="menuTree" class="ztree" data-required ></ul>
        </div>
        <div class="step-pane" id="simplewizardinwidgetstep3">
            <!--规则管理-->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">上架规则</label>
                    <div class="layui-input-inline" >
                        <select name="yxj">
                            <option value="0" selected="">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dz" id="dz" placeholder="请输入地址" data-required autocomplete="off" class="layui-input "/>
                    </div>
                </div>

            </div>
        </div>
        <div class="step-pane" id="simplewizardinwidgetstep4"></div>
        <div class="step-pane" id="simplewizardinwidgetstep5"></div>
    </div>
</form>
</body>

<div th:include="public/public_js::public_js"></div>
<script th:src="@{/plugin/beyond/assets/js/fuelux/wizard/wizard-custom-yjs.js}"></script>
<script>
    function returnpage() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }
    var ztree;
    var editMenuTreeNode;
    var type;
    var treeObj;
    var nodes;
    layui.use(["layer", "jquery", "zzpUtils", "element", "form","zzpValidation"], function () {
        var $ = layui.jquery,
            zzpUtils = layui.zzpUtils,
            element = layui.element,
            zzpValidation = layui.zzpValidation,
            form = layui.form;
        $('#simplewizardinwidget').wizard().on('change',function (e,step) {
            if(step.direction =="next"){
                return zzpValidation.validation("#addForm #simplewizardinwidgetstep"+step.step);
            }
        });
        $('#simplewizardinwidget').wizard().on('finished',function () {
            alert("结束啦");
        });

        ztree = zzpUtils.ztree.init({
            url: layui.data('app').contextPath +"/wmsOwner/getLibraryareaTree",
            type: "GET",
            elem: $("#menuTree"),

            setting: {
                callback: {
                    beforeExpand: window.zTreeBeforeExpand, // 用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
                    onClick: window.zTreeOnClick,
                    checked : true
                },
                view: {
                    addDiyDom: window.addDiyDom
                },check: {
                    enable: true
                },data: {
                    key: {
                        name: "label",
                        id:"key"
                    }
                }
            }
        });
        treeObj = $.fn.zTree.getZTreeObj("menuTree");


        $('.js-data-example-ajax').select2({
            ajax: {
                url: '/zxsdwms/wmsstockmove/searchKw',
                dataType: 'json',
                type: 'POST',
                contentType: "application/json",
                data: function (params) {
                    var query = {
                        show_ydhkwid: params.term,
                        hpbh: hpbh2
                    };
                    return JSON.stringify(query);
                },
                processResults: function (data) {
                    var arr = new Array();
                    if (data) {
                        for (var i = 0; i < data.length; i++) {
                            arr.push({id: data[i].ydhkwid, text: data[i].show_ydhkwid});
                        }
                    }
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            language: "zh-CN",
            placeholder: '请输入查询字段',
            allowClear: true
        });

    });
    function kwpd(indexs){
        var ids=[];
        if(indexs==2){
            nodes = treeObj.getCheckedNodes(true);
            if(nodes.length>0){
                for(var i=0;i<nodes.length-1;i++){
                    if(nodes[i].children.length>0){
                        for(var j=0;j<nodes[i].children.length-1;j++){
                            console.log(nodes[i].children[j]);
                            var a=nodes[i].children[j];
                            console.log(a.key);
                            var id=a.key;
                            ids.push(id);
                        }
                    }
                }
                $("#librarypositionIds").val(ids);
                return true;
            }else{
                layer.msg('请选择库位');
               // alert("哥们没选库位");
                return false;
            }
           // console.log(nodes); //获取选中节点的值
        }
        return true;
    }
</script>
</html>